<template>
  <div class="message-box">
    <el-popover v-model="showTodoList" popper-class="msg-info-poppor" placement="bottom-end" trigger="click">
      <div class="todo-box" slot="reference">
        <el-badge :value="count" :max="99" class="badge">
          <i class="el-icon-bell"></i>
          <span class="todo-txt">待办</span>
        </el-badge>
      </div>
      <ul class="todo-list">
        <li class="todo-item" v-for="item in msgList" :key="item.id" @click="onMsgClick(item)">
          <span :class="['todo-item-drop', item.isRead === '0' ? 'unread' : '']"></span>
          <div class="todo-item-txt">{{ item.needDealName }}</div>
        </li>
      </ul>
    </el-popover>
  </div>
</template>
<script>
import { updateNeedDealRead } from '@api/api.js'
export default {
  name: 'MessageIcon',
  props: {
    source: {
      type: Array,
      default: () => [],
    },
    count: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      showTodoList: false,
      msgList: [],
    }
  },
  watch: {
    source: {
      handler(list) {
        if (list && list.length) {
          this.msgList = list
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    async onMsgClick(item) {
      if (!item.id || !item.url) {
        return false
      }
      this.showTodoList = false
      this.$router.push({
        path: item.url,
      })
      if (item.isRead === '0') {
        const { code } = await updateNeedDealRead(item.id)
        if (code === 0) {
          this.$store.dispatch('getTodoList')
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.message-box {
  margin-right: 60px;
  .todo-box {
    position: relative;
    padding: 10px;
    cursor: pointer;
    i {
      font-size: 20px;
      color: #8c8c8c;
    }
    .badge {
      cursor: pointer;
    }
    .todo-txt {
      font-size: 14px;
      padding-left: 5px;
      color: #8c8c8c;
    }
  }
}
</style>
<style lang="scss">
.msg-info-poppor.el-popover {
  top: 50px !important;
  .todo-list {
    padding: 10px;
    min-width: 240px;
    max-width: 480px;
    .todo-item {
      width: 100%;
      padding: 5px 6px;
      font-size: 14px;
      margin-bottom: 10px;
      color: #666;
      cursor: pointer;
      display: flex;
      align-items: center;
      &:hover {
        background: #f7f7f7;
      }
      .todo-item-drop {
        width: 6px;
        height: 6px;
        margin-right: 5px;
        border-radius: 3px;
        background-color: #d1d1d1;
        &.unread {
          background-color: #ff6d56;
        }
      }
      .todo-item-txt {
        flex: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
</style>
